<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>订单详情</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../script/vant/index.css" />
    <link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="css/common.css" />
    <link rel="stylesheet" type="text/css" href="css/dl_order_detail.css" />
    <style>
        textarea.ordernum{
            width: 80%;
            float: left;
            min-height: 1rem;
            max-height: 2rem;
            line-height: 0.8rem;
            padding-top: 0.1rem;
            font-size: 14px;
            text-align: right;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <!-- 发货 -->
        <van-dialog v-model="showsend" title="发货信息确认" :before-close="beforeClose_send" show-cancel-button >
            <div class="dialog_tishi">
                <div class="dialog_item">
                    <div class="dia_item_title fl">商品信息:</div>
                    <div class="dia_item_dec fr">共{{form.AllQuantity}}件商品，总重{{form.AllWeight}}kg</div>
                </div>
                <div class="dialog_item">
                    <div class="dia_item_title fl">收货地址:</div>
                    <div class="dia_item_dec fr">{{form.AddressDetailInfo}}</div>
                </div>
            </div> 
        </van-dialog>
        <!-- 取消订单 -->
        <van-dialog v-model="show" title="提示信息" :before-close="beforeClose" show-cancel-button >
            <div class="dialog_tishi">订单取消后无法进行任何其它操作，是否确认取消订单？</div> 
        </van-dialog>
        <div class="bodymain">
            <div class="order_top">
                <div class="order_status">{{form.OrderStatusDesc}}</div>
                <div v-if="form.OrderStatus==1" class="order_topdec">
                    <span class="canpay">需付款：￥{{form.LastTotalCost}}</span>
                    <span>剩余时间:</span>
                    <span><van-count-down :time="time" format="mm:ss" /></span>
                </div>
            </div>
            
            <!-- <div class="order_status">待发货...</div> -->
            <div class="order_detail">
                <div class="or_detail_main">
                    <div v-if="form.OrderStatus==2||form.OrderStatus==5" class="newsteps" v-on:click="do_openStep()">
                        <div class="newstatus">
                            <i class="icon iconfont icon-xuanzhong-" style="font-size: 16.5px;font-weight: bold;"></i>
                            <span>{{form.OrderLog.Title}}</span>
                            <i class="icon iconfont icon-gengduo " style="float: right;"></i>
                        </div>
                        <div class="stepdec">{{form.OrderLog.Content}}</div>
                    </div>
                    <div class="addressdec">
                        <div class="newstatus">
                            <i class="icon iconfont icon-dizhiguanli font-weight" style="font-size: 18px;"></i>
                            <span>{{form.AddressUserName}}</span><span style="margin-left: 10px;">{{form.AddressPhoneNumber}}</span>
                        </div>
                        <div class="stepdec">收货地址：{{form.AddressDetailInfo}}</div>
                    </div>
                </div>
            </div>
                <div class="order_detail">
                    <div class="order_product">
                        <div class="productlist_title">
                            商品信息
                            <span>共{{form.AllQuantity}}件/{{form.AllWeight}}KG</span>
                        </div>
                        <ul class="aui-list aui-media-list" style="background-size:100% 0px;">
                            <li class="aui-list-item" v-for="item in form.ProductList">
                                <div class="aui-media-list-item-inner btn_line">
                                    <div class="aui-list-item-media">
                                        <img :src="item.GoodsCoverImage"/>
                                    </div>
                                    <div class="aui-list-item-inner">
                                        <div class="pro-list-item-title aui-ellipsis-2">
                                            {{item.ProductName}}
                                        </div>
                                        <div class="pro_dis">
                                            ￥<span>{{item.Price}}</span>
                                        </div>
                                    </div>
                                    <div class=" pro_price" style="margin: 12px 0 0 0;">
                                        <div class="item_price">
                                            <span>x{{item.Quantity}}</span>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <div v-if="form.ProductList!=undefined&&form.ProductList.length>5" class="allproduct">查看全部<i class="icon iconfont icon-zhankai"></i></div>
                        </ul>
                        <div class="order_pro">
                            <div class="order_msg">
                                <div class="msg_item">
                                    <div class="msgitem_title fl">商品总额</div>
                                    <div class="msgitem_num fr"><span>￥</span>{{form.TotalCost}}</div>
                                </div>
                                <div class="msg_item">
                                    <div class="msgitem_title fl">运费</div>
                                    <div class="msgitem_num fr"><span>￥</span>{{form.ShipRateAmount}}</div>
                                </div>
                                <div class="msg_item">
                                    <div class="msgitem_title fl">时段运费</div>
                                    <div class="msgitem_num fr"><span>￥</span>{{form.ShipTimeAmount}}</div>
                                </div>
                                <div class="msg_item">
                                    <div class="msgitem_title fl">包装费</div>
                                    <div class="msgitem_num fr"><span>￥</span>{{form.PackingFee}}</div>
                                </div>
                                <div class="msg_item">
                                    <div class="msgitem_title fl">优惠</div>
                                    <div class="msgitem_num fr redcolor">-<span>￥</span>{{form.CouponAmount}}</div>
                                </div>
                            </div>
                        </div>
                        <div class="order_pro_fw">
                            <div class="xiaoji">
                                共节省<span class="down_price">￥{{form.CouponAmount}}</span>实付金额：<span class="xj_fh">￥</span><span class="xj_price">{{form.LastTotalCost}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            <div class="order_detail">
                <div class="detail_msg_main">
                    <div class="productlist_title" style="margin-left: 0px;">
                        下单信息
                    </div>
                    <div class="detail_msg_dd">
                        <div class="msg_item ">
                            <div class="msgitem_title fl" style="width: 25%;">订单编号</div>
                            <div class="msgitem_dec fr" style=" width: 74%; position: relative;">
                                <textarea class="ordernum" type="text" id="dindan" v-model="form.OrderNumber" readonly unselectable="on"></textarea>
                                <span class="copy" v-on:click="copy_txt()">复制</span>
                            </div>
                        </div>
                        <div class="msg_item ">
                            <div class="msgitem_title fl">下单时间</div>
                            <div class="msgitem_dec fr">{{form.AddTime}}</div>
                        </div>
                        <div class="msg_item">
                            <div class="msgitem_title fl">支付方式</div>
                            <div class="msgitem_dec fr">{{form.PaymentMethodDesc}}</div>
                        </div>
                        <div class="msg_item">
                            <div class="msgitem_title fl">支付时间</div>
                            <div class="msgitem_dec fr">{{form.PayTime}}</div>
                        </div>
                        <div class="msg_item">
                            <div class="msgitem_title fl">配送方式</div>
                            <div class="msgitem_dec fr">{{form.SendTypeDesc}}</div>
                        </div>
                        <div class="msg_item">
                            <div class="msgitem_title fl">预约送达时间</div>
                            <div class="msgitem_dec fr">{{form.AppointmentTime}}-{{form.AppointmentEndTime}}</div>
                        </div>
                        <div class="msg_item">
                            <div class="msgitem_title fl">备注信息</div>
                            <div class="msgitem_dec fr">{{form.UserNote}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div  v-if="form.OrderStatus==5" class="pagebtn">
            <div class="buttom longwidth" v-on:click="do_sendProduct()">发货</div>
        </div>
        <div v-if="form.OrderStatus==1" class="pagebtn">
            <div class="linebuttom sortwidth ml4 fl" v-on:click="do_editorder()">修改费用</div>
            <div class="buttom sortwidth mr4 fr" v-on:click="do_removeorder()">取消订单</div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/config.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<!-- <script type="text/javascript " src="../script/vue.js "></script> -->
<script type="text/javascript " src="../script/vant/vue.js"></script>
<script type="text/javascript " src="../script/vant/vant.js"></script>
<script type="text/javascript" src="../script/aui-toast.js"></script>
<script type="text/javascript" src="../script/aui-tab.js"></script>
<script type="text/javascript " src="js/dl_order_detail.js"></script>
<script type="text/javascript">
</script>

</html>
